/*
 * @描述:标签卡片组件
 * @Author: /songzi
 * @Date: 2019-07-23 16:16:02
 * @Last Modified by:   songzi
 * @Last Modified time: 2019-07-23 16:16:02
 */

import React from 'react';
import { Card, List, Empty, Tag } from 'antd';
import styles from './index.less';

const LableCard = ({
  actions,
  dataSource = [],
  lableHead,
  firstTagName = '数量',
  lableGrid = { gutter: 24, lg: 6, md: 2, sm: 1, xs: 1 },
  lableContent,
}) => (
  <div className={styles.lableCard}>
    <List
      className={styles.firstList}
      grid={{ gutter: 16, xs: 1 }}
      dataSource={dataSource}
      renderItem={firstLable => (
        <List.Item className={styles.firstListItem}>
          <Card
            headStyle={{ padding: 0 }}
            bodyStyle={{ padding: 0, paddingTop: '15px' }}
            bordered={false}
            title={
              <div className={styles.infoCardTitle}>
                <span className={styles.infoCardTitleSpan}>{firstLable.name}</span>
                <span className={styles.infoCardTitleSpan}>
                  <Tag color="#108ee9">
                    {firstTagName}：{firstLable.child.length}
                  </Tag>
                </span>
              </div>
            }
          >
            <List
              grid={lableGrid}
              dataSource={firstLable.child}
              renderItem={lableItem => (
                <List.Item>
                  <Card
                    size="small"
                    // bordered={false}
                    className={styles.firstLableCard}
                    headStyle={{ padding: '0 10px' }}
                    title={lableHead ? lableHead(lableItem) : lableItem.name}
                    actions={actions || false}
                  >
                    <div className={styles.lableInfoContent}>
                      {lableContent ? (
                        lableContent(lableItem)
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
                      )}
                    </div>
                  </Card>
                </List.Item>
              )}
            ></List>
          </Card>
        </List.Item>
      )}
    ></List>
  </div>
);
export default LableCard;
